<template>
  <Card class="add-roles-pop" v-if="isShowPop">
    <div class="mask"></div>
    <div class="add-roles-pop--container">
      <div class="add-roles-pop--body">
        <p class="pop-header">添加权限</p>
        <div class="pop-body">
          <!--左侧主菜单-->
          <div class="pop--left-content page-fill scroll-bar">
            <!--全选-->
            <div class="role-item active"
                 @click="handleSelectAll">
              <i class="check-box"
                 :class="{'select-not-all':roles.selectNotAll,'select-all':roles.selectAll}"></i>
              <span class="item-name">全选</span>
            </div>
            <!--一级菜单-->
            <div class="role-item"
                 v-for="(role,index) in roles"
                 :class="{'active':currentGradeOneSelectIndex===index}"
                 @click="handleRoleClick(index)">
              <i class="check-box"
                 @click="handleSelect(role,role.id)"
                 :class="{'select-not-all':!!role.selectNotAll,'select-all':!!role.selectAll}"></i>
              <span class="item-name">{{role.name}}</span>
            </div>
          </div>

          <!--右侧权限列表-->
          <div class="pop--right-content page-fill scroll-bar">
            <div class="role-list">
              <div class="role-item" v-for="role in rightRoleList">
                <!--二级菜单-->
                <div class="role-item--header">
                  <div style="display: inline-block;cursor: pointer" @click="handleSelect(role,role.id)">
                    <i class="check-box"
                       :class="{'select-not-all':!!role.selectNotAll,'select-all':!!role.selectAll}"></i>
                    <span class="item-name">{{role.name}}</span>
                  </div>
                </div>
                <!--三级菜单-->
                <template v-if="role.children && role.children.length">
                  <div class="role-item--body">
                    <div style="margin-bottom:8px;" v-for="item in role.children">
                      <div style="display: inline-block;cursor: pointer" @click="handleSelect(item,item.id)">
                        <i class="check-box"
                           :class="{'select-not-all':!!item.selectNotAll,'select-all':!!item.selectAll}"></i>
                        <span class="item-name">{{item.name}}</span>
                      </div>
                      <!--四级菜单-->
                      <template v-if="item.children && item.children.length">
                        <div class="three-level-role">
                          <div style="display: inline-block;cursor: pointer" v-for="itm in item.children"
                               @click="handleSelect(itm,itm.id)">
                            <i class="check-box"
                               :class="{'select-all':!!itm.selectAll}"></i>
                            <span class="item-name">{{itm.name}}</span>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-roles-pop--btn">
        <!-- <v-button type="primary" size="small" @on-click="handleSubmit">保存</v-button> -->
        <Button @click="handleSubmit" type="primary" >保存</Button>
        <!-- <v-button type="primary"
                  size="small"
                  @on-click="handleCancel"
                  style="margin-left:60px;background:#fff;color:#666;border:0;">取消
        </v-button> -->
        <Button @click="handleCancel" type="primary" style="margin-left:60px;background:#fff;color:#666;border:0;">取消</Button>
      </div>
    </div>
  </Card>
</template>

<script>
  export default {
    data(){
      return {
        isShowPop: true,
        currentGradeOneSelectIndex: null,
        rightRoleList: [],
        roles: [],
        tempSelectedList: []
      }
    },
    watch: {
      roles: {
        handler( val ){
          let n = [];
          for ( let i = 0; i < val.length; i++ ) {
            let itm = val[ i ];
            if ( itm.selectAll ) {
              n.push( 1 );
            }
            if ( itm.selectNotAll ) {
              n.push( 0 );
            }
          }
          if ( n.length === 0 ) {
            this.$set( val, 'selectAll', false );
            this.$set( val, 'selectNotAll', false );
          } else if ( n.indexOf( 0 ) === -1 && n.length === val.length ) {
            this.$set( val, 'selectAll', true );
            this.$set( val, 'selectNotAll', false );
          } else {
            this.$set( val, 'selectAll', false );
            this.$set( val, 'selectNotAll', true );
          }
        },
        deep: true
      },
      rolesList(){
        this.roles = JSON.parse( JSON.stringify( this.rolesList ) );
      },
      tempSelectedList( val ){
        this.$emit( 'input', val )
      }
    },
    computed: {},
    methods: {
      handleCancel(){
        this.isShowPop = false;
        this.$emit( 'on-cancel' );
      },
      handleSubmit(){
        this.isShowPop = false;
        this.$emit( 'on-submit',this.roles );
      },
      handleSelectAll(){
        if ( this.roles.selectNotAll ) {
          this.$set( this.roles, 'selectAll', true );
          this.$set( this.roles, 'selectNotAll', false );
        } else {
          this.$set( this.roles, 'selectAll', !this.roles.selectAll );
          this.$set( this.roles, 'selectNotAll', false );
        }

        //设置所有子代状态;
        const fn = ( roles, val ) => {
          roles.forEach( item => {
            this.$set( item, 'selectAll', val );
            this.$set( item, 'selectNotAll', false );
            if ( item.children && item.children.length ) {
              fn( item.children, val );
            }
          } )
        }

        fn( this.roles, this.roles.selectAll );
      },
      handleRoleClick( index ){
        this.rightRoleList = [];
        this.currentGradeOneSelectIndex = index;
        this.rightRoleList = this.roles[ index ].children;
      },
      handleSelect( item, id ){
        if ( item.selectNotAll ) {
          this.$set( item, 'selectAll', true );
          this.$set( item, 'selectNotAll', false );
        } else {
          this.$set( item, 'selectAll', !item.selectAll );
          this.$set( item, 'selectNotAll', false );
        }

        //设置子代状态;
        this.handleLoopChildren( item, item.selectAll );

        //设置所有父级状态
        this.handleLoopParent( item, item.selectAll, id );
      },
      handleLoopChildren( obj, val ){
        if ( obj.children && obj.children.length ) {
          obj.children.forEach( item => {
            this.$set( item, 'selectAll', val );
            this.$set( item, 'selectNotAll', false );
            this.handleLoopChildren( item, val );
          } )
        } else {
          if ( val ) {
            let flag=false
            this.tempSelectedList.forEach(item=>{
              if(item.id === obj.id){
                flag =true
              }
            })
            if(!flag){
              this.tempSelectedList.push( obj )
            }
          } else {
            let currentIndex = null
             this.tempSelectedList.forEach((item,index)=>{
              if(item.id === obj.id){
                currentIndex = index
              }
            })
            this.tempSelectedList.splice( currentIndex, 1 )
          }
        }
      },
      handleFindParentObj( arr ){
        let tmpArr = arr.slice( 0, arr.length - 1 );
        let tmp = this.roles[ tmpArr[ 0 ] - 1 ];  // 1-1-1-2  id 是从1开始的，所以减1
        for ( let i = 1; i < tmpArr.length; i++ ) {
          tmp = tmp.children[ tmpArr[ i ] - 1 ];
        }
        return tmp;
      },
      handleLoopParent( obj, val, id ){
        let indexsArr = id.split( '-' );
        let currentParentObj = null;

        let length = indexsArr.length, arr = indexsArr;
        while ( length > 1 ) {
          arr = arr.slice( 0, length );
          currentParentObj = this.handleFindParentObj( arr );
          let n = [];
          for ( let i = 0; i < currentParentObj.children.length; i++ ) {
            let itm = currentParentObj.children[ i ];
            if ( itm.selectAll ) {
              n.push( 1 );
            }
            if ( itm.selectNotAll ) {
              n.push( 0 );
            }
          }
          if ( n.length === 0 ) {
            this.$set( currentParentObj, 'selectAll', false );
            this.$set( currentParentObj, 'selectNotAll', false );
          } else if ( n.indexOf( 0 ) === -1 && n.length === currentParentObj.children.length ) {
            this.$set( currentParentObj, 'selectAll', true );
            this.$set( currentParentObj, 'selectNotAll', false );
          } else {
            this.$set( currentParentObj, 'selectAll', false );
            this.$set( currentParentObj, 'selectNotAll', true );
          }
          length--;
        }
      },
      handleInitParent( obj, val, id ){
        let indexsArr = id.split( '-' );
        let currentParentObj = null;

        let length = indexsArr.length, arr = indexsArr;
        while ( length > 1 ) {
          arr = arr.slice( 0, length );
          currentParentObj = this.handleFindParentObj( arr );
          if ( currentParentObj.selectedNumber === undefined ) {
            currentParentObj.selectedNumber = 0
          }

          if ( length === indexsArr.length ) {
            for ( let i = 0; i < currentParentObj.children.length; i++ ) {
              let itm = currentParentObj.children[ i ];
              if ( id === itm.id ) {
                this.$set( currentParentObj.children[ i ], 'selectAll', true )
                currentParentObj.selectedNumber++
              }
            }
            if ( currentParentObj.selectedNumber === currentParentObj.children.length ) {
              this.$set( currentParentObj, 'selectAll', true );
              this.$set( currentParentObj, 'selectNotAll', false );
            } else if ( currentParentObj.selectedNumber === 0 ) {
              this.$set( currentParentObj, 'selectAll', false );
              this.$set( currentParentObj, 'selectNotAll', false );
            } else {
              this.$set( currentParentObj, 'selectAll', false );
              this.$set( currentParentObj, 'selectNotAll', true );
            }
          } else {
            let n = [];
            for ( let i = 0; i < currentParentObj.children.length; i++ ) {
              let itm = currentParentObj.children[ i ];
              if ( itm.selectAll ) {
                n.push( 1 );
              }
              if ( itm.selectNotAll ) {
                n.push( 0 );
              }
            }
            if ( n.length === 0 ) {
              this.$set( currentParentObj, 'selectAll', false );
              this.$set( currentParentObj, 'selectNotAll', false );
            } else if ( n.indexOf( 0 ) === -1 && n.length === currentParentObj.children.length ) {
              this.$set( currentParentObj, 'selectAll', true );
              this.$set( currentParentObj, 'selectNotAll', false );
            } else {
              this.$set( currentParentObj, 'selectAll', false );
              this.$set( currentParentObj, 'selectNotAll', true );
            }
          }
          length--;
        }
      }
    },
    created(){
      this.roles = JSON.parse( JSON.stringify( this.rolesList ) )
      this.tempSelectedList = JSON.parse( JSON.stringify( this.value ) )
      this.tempSelectedList.forEach( item => {
        this.handleInitParent( item, true, item.id )
      } )
    },
    props: {
      rolesList: {
        type: Array,
        default(){
          return []
        },
      },
      value: Array
    },
  }
</script>

<style lang="less">
  .add-roles-pop {
    .mask {
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: .7;
      background: #000;
    }
    .add-roles-pop--container {
      position: fixed;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .add-roles-pop--body {
      width: 700px;
      height: 560px;
      background: #2F4050;
      border-radius: 8px;
      overflow: hidden;
    }
    .pop-header {
      height: 50px;
      line-height: 50px;
      background: #2F4050;
      text-align: center;
      font-size: 20px;
      color: #fff;
    }
    .pop-body {
      padding: 20px 40px 0 0;
      height: 580px;
      box-sizing: border-box;
      background: #fff;
    }
    .pop--left-content {
      float: left;
      width: 120px;
      background: #fff;
      height: 100%;
      .role-item {
        display: block;
        height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        background: #F0F0F0;
        cursor: pointer;
        font-size: 0;
        .check-box {
          position: relative;
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-top: 13px;
          background: #fff;
          border: 1px solid #ccc;
          border-radius: 2px;
          box-sizing: border-box;
          transition: all .35s;
          &:after {
            content: '';
            position: absolute;
            z-index: 1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all .35s;
            background: #fff;
          }
          &.select-not-all, &.select-all {
            background: #639DF9;
            border: 0;

          }
          &.select-not-all {
            &:after {
              width: 8px;
              height: 2px;
              background: #fff;
            }
          }
          &.select-all {
            &:after {
              width: 10px;
              height: 8px;
              background: url('/src/images/success.png') no-repeat center;
              background-size: 100%;
            }
          }
        }
        .item-name {
          position: relative;
          top: -2px;
          font-size: 14px;
          color: #666;
          margin-left: 10px;
        }
        &.active {
          background: #fff;
          color: #000;
          .item-name {
            color: #000;
          }
        }
      }
    }
    .pop--right-content {
      margin-left: 140px;
      height: 100%;
      .role-item {
        margin: 10px;
        padding: 8px 20px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        font-size: 0;
        .check-box {
          position: relative;
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-top: 13px;
          background: #fff;
          border: 1px solid #ccc;
          border-radius: 2px;
          box-sizing: border-box;
          &.select-not-all, &.select-all {
            background: #639DF9;
            border: 0;
            &:after {
              content: '';
              position: absolute;
              z-index: 1;
              left: 50%;
              top: 50%;
            }
          }
          &.select-not-all {
            &:after {
              width: 8px;
              height: 2px;
              transform: translate(-50%, -50%);
              background: #fff;
            }
          }
          &.select-all {
            &:after {
              width: 10px;
              height: 8px;
              background: url('/src/images/success.png') no-repeat center;
              background-size: 100%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .item-name {
          position: relative;
          top: -2px;
          font-size: 14px;
          color: #666;
          margin-left: 4px;
        }
        .role-item--header {
          position: relative;
          padding-bottom: 8px;
          &:after {
            content: '';
            position: absolute;
            z-index: 1;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #E9E9E9;
          }
          .item-name {
            margin-left: 10px;
          }
        }
        .three-level-role {
          position: relative;
          display: inline-block;
          padding-left: 24px;
          &:before {
            content: '';
            position: absolute;
            left: 8px;
            top: 20px;
            z-index: 1;
            width: 8px;
            height: 1px;
            background: #444;
          }
          .item-name {
            margin-right: 20px;
          }
        }
      }
    }
    .add-roles-pop--btn {
      margin-top: 40px;
      text-align: center;
    }
    @media screen and (max-width: 1400px) {
      .pop-header {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
      }

      .add-roles-pop--body {
        height: 440px;
        border-radius: 6px;
      }

      .pop-body {
        padding: 15px 30px 0 0;
        height: 400px;
      }
    }
  }
</style>
